<template>
  <div class="bbig">
    <van-nav-bar
      title="课程详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="share-o" size="18" @click="showShare = true" />
      </template>
    </van-nav-bar>
    <van-share-sheet
      v-model:show="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <div class="bigbox">
      <div class="box">
        <img src="../../../mock/images/人工智能.png" />
      </div>
      <van-tabs v-model="active">
        <van-tab title="课程介绍">
          <div class="cbox">
            <div class="dbox">{{ title }}</div>
            <div class="ebox">
              <van-rate
                v-model="value"
                :size="15"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
              <span class="abox">5.0</span>
              <span class="bbox">2345人看过</span>
            </div>
            <div>免费</div>
          </div>
          <div class="gbox">
            <div class="fbox">
              <img src="../../../mock/images/人工智能.png" />
            </div>
            <div class="jbox">
              <div class="hbox">
                <div class="kbox">UI设计林老师</div>
                <div>99000粉丝</div>
              </div>
              <div>
                <van-icon name="arrow" />
              </div>
            </div>
          </div>
          <div class="atext">
            <div class="btext">课程介绍</div>
            <div class="ctext">
              <img src="../../../mock/images/share.png" />
            </div>
            <div class="dtext">
              UI设计基础班+UI视觉系统班+UI设计案例强化班+UI交互设计系统班+UI动效系统班UI设计全能就业班新一期开班，经过了全新的升级，打造出了一套全新的系统课程。所讲到的内容有，涉及到UI设计工作需要的所有技能。PS软件，AI软件，AE软件，Axure软件，APP设计，主题设计，切图，适配，规范，兼职接单，上线项目讲解，网页设计，基础代码，BANNER，小程序的设计，H5的设计交互设计，用户体验，美术基础，版式布局，图标设计，布尔运算，透视原理，界面设计，动效设计，就业指导，作品集制作，审美能力的提升，创意能力的提升。
            </div>
          </div>
        </van-tab>
        <van-tab title="目录">
          <van-index-bar :index-list="indexList">
            <van-index-anchor index="">第一章课程入门</van-index-anchor>
            <van-cell title="课程导学1" />
            <van-cell title="课程导学1" />
            <van-cell title="课程导学1" />
            <van-cell title="课程导学1" />
            <van-cell title="课程导学1" />
            <van-cell title="课程导学1" />

            <van-index-anchor index="">第二章认识Ui</van-index-anchor>
            <van-cell title="课程导学2" />
            <van-cell title="课程导学2" />
            <van-cell title="课程导学2" />
            <van-cell title="课程导学2" />
            <van-cell title="课程导学2" />
            <van-cell title="课程导学2" />

            ...
          </van-index-bar>
        </van-tab>
        <van-tab title="评价">
          <div>
            <van-cell title="评价（222条）" value="全部" />
            <div class="zlast">
              <div class="alast">
                <div class="clast">4.8</div>
                <div class="blast">
                  <van-rate
                    v-model="star1"
                    :size="15"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                  <van-rate
                    v-model="star2"
                    :size="15"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                  <van-rate
                    v-model="star3"
                    :size="15"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                  <van-rate
                    v-model="star4"
                    :size="15"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                </div>
                <div class="dlast">
                  <van-progress
                    pivot-text="红色"
                    color="#ee0a24"
                    :percentage="90"
                  />
                  <van-progress
                    pivot-text="红色"
                    color="#ee0a24"
                    :percentage="70"
                  />
                  <van-progress
                    pivot-text="红色"
                    color="#ee0a24"
                    :percentage="50"
                  />
                  <van-progress
                    pivot-text="红色"
                    color="#ee0a24"
                    :percentage="30"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="glast">
            <div class="elast">
              <div class="flast">kasadk</div>
              <div class="jlast">
                <div>
                  <van-rate
                    v-model="star"
                    :size="15"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                </div>
                <div class="olast">2019-09-09</div>
              </div>
            </div>
            <div class="hlast">
              老师讲的非常好~课程分布非常合理，条理清晰，每节课都会有示例，很多设计技巧都很实用，学到了很多，谢谢老师！
            </div>
          </div>
          <div class="glast">
            <div class="elast">
              <div class="flast">kasadk</div>
              <div class="jlast">
                <div>
                  <van-rate
                    v-model="star"
                    :size="15"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                </div>
                <div>2019-09-09</div>
              </div>
            </div>
            <div class="hlast">
              老师讲的非常好~课程分布非常合理，条理清晰，每节课都会有示例，很多设计技巧都很实用，学到了很多，谢谢老师！
            </div>
          </div>
          <div class="glast">
            <div class="elast">
              <div class="flast">kasadk</div>
              <div class="jlast">
                <div>
                  <van-rate
                    v-model="star"
                    :size="15"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                </div>
                <div>2019-09-09</div>
              </div>
            </div>
            <div class="hlast">
              老师讲的非常好~课程分布非常合理，条理清晰，每节课都会有示例，很多设计技巧都很实用，学到了很多，谢谢老师！
            </div>
          </div>
        </van-tab>
        <van-tab title="推荐">
          <van-swipe-cell v-for="item in datalist.list6" :key="item.id">
            <van-card :title="item.title" :thumb="datalist.image5">
              <template #num>
                <span>观看 {{ item.num }} </span>
              </template>

              <template #price>
                <span>liulst</span>
              </template>
            </van-card>
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
        </van-tab>
      </van-tabs>
      <div class="etext">
        <van-button type="primary" block round> 立刻学习 </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: '',
  data() {
    return {
      title: '',
      star: 5,
      star1: 4,
      star2: 3,
      star3: 2,
      star4: 1,

      value: 4,
      indexList: [],
      active: 4,
      datalist: [],
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onSelect(option) {
      Toast(option.name)
      this.showShare = false
    },
  },
  async created() {
    const res = await axios.get('/mock/api/home/list')
    this.datalist = res.data.data
    this.title = this.$route.query.title
    console.log(this.$route.query.title)
  },
}
</script>

<style lang="less" scoped>
@import '../../style/common.less';

.bbig {
  background-color: @cf5;

  .bigbox {
    .box {
      width: 100%;
      height: 30vh;

      img {
        width: 100%;
        height: 100%;
      }
    }

    :deep(.van-index-anchor) {
      font-size: 0.8rem;
      font-weight: 700;
    }

    .cbox {
      padding: 5vw;
      background-color: @cf;
      margin-bottom: 2vh;

      .dbox {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 2vh;
      }

      .ebox {
        margin-bottom: 2vh;

        .abox {
          margin-left: 2vw;
          font-weight: 700;
        }

        .bbox {
          margin-left: 2vw;
          font-size: 0.8rem;
          color: @g5;
        }
      }
    }

    .gbox {
      display: flex;
      flex-direction: row;
      padding: 5vw;
      background-color: @cf;
      margin-bottom: 2vh;

      .fbox {
        margin-right: 5vw;
        width: 30%;
        height: 30%;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .jbox {
        display: flex;
        flex-direction: row;

        .hbox {
          margin-right: 20vw;

          .kbox {
            font-size: 0.9rem;
            margin-bottom: 1vh;
            font-weight: 700;
          }
        }
      }
    }

    .atext {
      padding: 5vw;
      background-color: @cf;

      .btext {
        font-size: 1rem;
        margin-bottom: 1vh;
        font-weight: 700;
      }

      .ctext {
        width: 100%;
        height: 40%;
        margin-bottom: 1vh;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .dtext {
        font-size: 0.7rem;
        line-height: 4vh;
      }
    }

    .etext {
      background-color: @cf;
      padding: 0 5vw;
    }
  }

  .alast {
    display: flex;
    flex-direction: row;
    justify-content: start;
    background-color: @cf;
    padding: 0 5vw;

    .blast {
      display: flex;
      flex-direction: column;
      padding: 5vw 0;
    }

    .clast {
      padding: 5vw 0;
      font-size: 3rem;
      font-weight: 700;
      margin-right: 5vw;
    }

    .dlast {
      width: 40%;
      padding: 5vw 0;

      .van-progress {
        margin-bottom: 3vw;

        :deep(.van-progress__pivot) {
          display: none;
        }
      }
    }
  }

  .glast {
    padding: 5vw;
    background-color: @cf;

    .elast {
      display: flex;
      justify-content: space-between;
      margin-bottom: 1vh;

      .flast {
        font-size: 1rem;
        font-weight: 600;
        padding-top: 1vh;
      }

      .olast {
        font-size: 0.8rem;
      }
    }

    .hlast {
      font-size: 0.8rem;
      line-height: 3vh;
    }
  }
}
</style>
